<template>
	<div class="base-dialog">
		<el-dialog
			v-model="dialogVisible"
			:disabled="disabled"
			:draggable="draggable"
			:fullscreen="isFullscreenVal"
			:append-to-body="true"
			:width="width"
			:show-close="false"
			v-loading="loading"
		>
			<template #header>
				<slot name="header">
					<span class="el-dialog__title">{{ title }}</span>
				</slot>
				<div class="dialog-header-btns">
					<button v-if="showFullscreen" aria-label="fullscreen" type="button" @click="setFullscreen">
						<SvgIcon v-if="isFullscreenVal" name="ele-BottomLeft" class="el-dialog__close" size="16" />
						<SvgIcon v-else name="ele-FullScreen" class="el-dialog__close" size="16" />
					</button>
					<button aria-label="close" type="button" @click="close">
						<SvgIcon name="ele-Close" class="el-dialog__close" size="16" />
					</button>
				</div>
			</template>
			<div v-loading="dialogLoading">
				<slot></slot>
			</div>
			<template #footer v-if="showFooter">
				<slot name="footer">
					<span class="dialog-footer">
						<el-button @click="handleCancel">{{ cancelText }}</el-button>
						<el-button type="primary" @click="handleSave">{{ saveText }}</el-button>
					</span>
				</slot>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
import { ref, nextTick } from 'vue';

const props = defineProps({
	// 标题
	title: {
		type: String,
		default: '',
	},
	// 显示尾部
	showFooter: {
		type: Boolean,
		default: true,
	},
	// 取消按钮
	cancelText: {
		type: String,
		default: '取 消',
	},
	// 确认按钮
	saveText: {
		type: String,
		default: '确 认',
	},
	// 是否全屏
	isFullscreen: {
		type: Boolean,
		default: false,
	},
	// 全屏显示
	showFullscreen: {
		type: Boolean,
		default: true,
	},
	// 是否拖动
	draggable: {
		type: Boolean,
		default: false,
	},
	// 是否禁用
	disabled: {
		// 是否禁用
		type: Boolean,
		default: false,
	},
	// 宽度
	width: {
		type: String,
		default: 'auto',
	},
	// 加载中
	loading: {
		type: Boolean,
		default: false,
	},
});

const dialogVisible = ref(false);

const isFullscreenVal = ref(props.isFullscreen);

const dialogLoading = ref(props.loading);

const emit = defineEmits(['confirm', 'cancel', 'close', 'open']);

const handleCancel = () => {
	emit('cancel');
	close();
};

const handleSave = () => {
	emit('confirm');
};

const setFullscreen = () => {
	isFullscreenVal.value = !isFullscreenVal.value;
};

const loading = (val:boolean) => {
	dialogLoading.value = val;
};

const close = () => {
	dialogVisible.value = false;
	nextTick(() => {
		emit('close');
	});
};

const open = () => {
	if (props.disabled) return;
	dialogVisible.value = true;
	emit('open');
};

defineExpose({
	loading,
	open,
	close,
});
</script>


<style lang="scss" scoped>
.dialog-header-btns {
	position: absolute;
	top: var(--el-dialog-padding-primary);
	right: var(--el-dialog-padding-primary);
}
.dialog-header-btns button {
	padding: 0;
	background: transparent;
	border: none;
	outline: none;
	cursor: pointer;
	font-size: var(--el-message-close-size, 16px);
	margin-left: 15px;
	color: var(--el-color-info);
}
.dialog-header-btns button:hover .el-dialog__close {
	color: var(--el-color-primary);
}

</style>
<style lang="scss">
.el-dialog.is-fullscreen>.el-dialog__body {
	height: calc(100vh - 116px) !important;
	max-height: calc(100vh) !important;
}
</style>
